/** 
  课程新增
*/
<template>
    <div>
        <div class="project-application-container" style="height: 30px;">
            <el-breadcrumb style="float: left;" separator="/">
                <el-breadcrumb-item :to="{ path: '/courseManagementList' }">
                    <span @click="returnList">课程管理</span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <span>查看课程</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div v-if="ifShow === 'list'">
            <el-card>
                <span class="top-title">
                    <el-button style="float:right" @click="returnList">返回</el-button>
                    <h2>查看</h2>
                </span>
                <hr />
                <el-form
                    :model="proForm"
                    :rules="rulesForm"
                    ref="proForm"
                    label-position="right"
                    label-suffix="："
                    label-width="100px"
                >
                    <span class="topic-form-title">
                        <h3>基础信息</h3>
                    </span>
                    <br />
                    <el-row :gutter="24">
                        <el-col :span="6">
                            <el-form-item label="课程名称" prop="title">
                                <el-input
                                    v-model="proForm.title"
                                    class="topic-input-select"
                                    maxlength="32"
                                    disabled
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="开课学院" prop="college">
                                <el-input
                                    v-model="proForm.college"
                                    class="topic-input-select"
                                    maxlength="32"
                                    disabled
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="是否必修" prop="required">
                                <el-input
                                    v-model="proForm.required"
                                    class="topic-input-select"
                                    maxlength="32"
                                    disabled
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <span class="topic-form-title">
                        <h3>课程基本资料上传</h3>
                    </span>
                    <br />
                    <el-row :gutter="24">
                        <el-col :span="6">
                            <el-form-item label="封面图片" prop="cover">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="6">
                            <el-form-item label="课程材料" prop="materialList">
                                <a href="#" @click="toView">{{ proForm.fileName }}</a>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>
            <br />
            <el-card>
                <span class="topic-form-title">
                    <h3>审批进度</h3>
                </span>
                <edu-table :pagination="false" :data="approveHistory" :selection="false">
                    <edu-table-column prop="time" label="时间" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.time | time }}
                        </template>
                    </edu-table-column>
                    <edu-table-column
                        prop="approvorName"
                        label="审批人"
                        align="center"
                    ></edu-table-column>
                    <edu-table-column prop="role" label="角色" align="center"></edu-table-column>

                    <edu-table-column prop="result" label="操作" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.result | result }}
                        </template>
                    </edu-table-column>
                    <edu-table-column
                        prop="content"
                        label="审核意见"
                        align="center"
                    ></edu-table-column>
                </edu-table>
            </el-card>
        </div>
        <div v-if="ifShow === 'view'">
            <course-Detail
                @returnVal="changekey"
                :id="id"
                :fileName="fileName"
                :pageFrom="pageFrom"
            ></course-Detail>
        </div>
    </div>
</template>

<script>
import courseManageApi from 'common/src/api/academicBehaviorNorms/lessonManage/courseManage'
import UTILS from 'common/src/utils/utils'
import { queryDic } from 'common/src/api/dictionary'
import { downloadimage } from 'common/src/api/upload'
import * as INDEX from 'common/src/utils/index'
import courseDetails from './courseDetails'
export default {
    components: {
        'course-Detail': courseDetails
    },
    props: {
        Id: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            proForm: {
                college: '',
                required: '',
                title: '',
                cover: '',
                fileName: '',
                materialList: [],
                isAdministrator: 0,
                isFacultyStaff: 0,
                isTeacher: 0
            },
            ifShow: 'list',
            approveHistory: [],
            isTeacher: 0, // 教师
            isFacultyStaff: 0, // 教务员
            isAdministrator: 0, // 管理员
            imageUrl: '',
            fileListAvatar: [],
            auths: [],
            options: {
                faculty: []
            },
            isRequired: [{ label: '是', value: 1 }, { label: '否', value: 0 }],
            fileList: []
        }
    },
    filters: {
        time(val) {
            return INDEX.parseTime(val, '{y}-{m}-{d}')
        },
        result(val) {
            switch (val) {
                case 'Process':
                    return '通过'
                case 'Reject':
                    return '驳回'
                case 'Recall':
                    return '撤回'
                case 'End':
                    return '通过'
                case 'COMMIT':
                    return '已提交'
                case 'approveNoPass':
                    return '不通过'
                default:
                    return ' '
            }
        }
    },
    created() {
        this.getDetail()
    },

    methods: {
        returnList() {
            this.$emit('returnVal', 'list')
        },
        changekey(val) {
            this.ifShow = val.val
        },
        toView() {
            this.ifShow = 'view'
            this.id = this.Id
            this.pageFrom = 'viewCourse'
            this.fileName = this.proForm.fileName
        },
        getDetail() {
            courseManageApi.getById(this.Id).then(res => {
                this.proForm.college = res.data.collegeName
                this.proForm.title = res.data.title
                this.proForm.fileName = res.data.fileName
                this.approveHistory = res.data.approveHistory
                if (res.data.required === 0) {
                    this.proForm.required = '否'
                } else if (res.data.required === 1) {
                    this.proForm.required = '是'
                }
                if (res.data.cover) {
                    downloadimage(res.data.cover).then(resT => {
                        if (resT && resT.data) {
                            this.imageUrl = resT.data.base
                        }
                    })
                }
            })
        }
    }
}
</script>
<style scoped lang="scss">
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
}
.avatar {
    width: 148px;
    height: 148px;
    display: block;
}
</style>
